<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.dvtitle}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask">
				</image>
			</view>
		</view>
		<!-- 总资产 -->
		<view class="total" @click="toWalletAll">
			<view class="left">
				<view class="line1">
					<view class="test">
						{{$data.$language.dtest}}
					</view>
					<image src="../../static/qianbaobeifen2_slices/yincang (1)beifen 3.png" mode=""></image>
				</view>

				<view class="line2">
					<view class="number">
						{{count_usdt}}
					</view>
					<view class="word">
						USDT
					</view>
				</view>

				<view class="line3">
					<view class="code">
						{{code}}
					</view>
					<image src="../../static/qianbaobeifen2_slices/fuzhi.png" mode=""></image>
				</view>

				<view class="line4">
					<view class="test1">
						WOO
					</view>
					<view class="test2">
						{{woo}}
					</view>
					<view class="bd">

					</view>
					<view class="test3">
						WONE
					</view>
					<view class="test4">
						{{wone}}
					</view>
				</view>
			</view>
			<view class="right">
				<image src="../../static/qianbaobeifen2_slices/_xialajiantouxiaobeifen 8.png" mode=""></image>
			</view>
		</view>
		<!-- 闪兑质押 -->
		<view class="oval">
			<view class="flash" @click="toFlash">
				<image src="../../static/qianbaobeifen2_slices/duihuanqingkuangbeifen.png" mode="" class="change">
				</image>
				<view class="word">
					{{$data.$language.dword1}}
				</view>
				<image src="../../static/qianbaobeifen2_slices/jiantouqiehuanzuo (1).png" mode="" class="go"></image>
			</view>
			<view class="impawn" @click="toImpawn">
				<image src="../../static/qianbaobeifen2_slices/suo.png" mode="" class="change"></image>
				<view class="word">
					{{$data.$language.dword2}}
				</view>
				<image src="../../static/qianbaobeifen2_slices/jiantouqiehuanzuo (1).png" mode="" class="go"></image>
			</view>
		</view>
		<view class="classify">
			<view class="title">
				<view class="title1" @click="toDetails">
					{{$data.$language.dtitle1}}
				</view>
				<view class="title2" @click="toWallet">
					{{$data.$language.dtitle2}}
					
				</view>
				<view class="title2 ationve" >
					{{$data.$language.WONEDetails}}
					<view class="shortLine">
					</view>
				</view>
			</view>
			
			<view class="details">
				<view class="btns">
					<view class="btn1 tab" :class="{ 'active': selectedTab === 'left' }" @click="selectTab('left',99)">
						{{$data.$language.wbtn1}}
					</view>
					<view class="btn2 tab" :class="{ 'active': selectedTab === 'middle' }" @click="selectTab('middle',1)">
						{{$data.$language.wbtn2}}
					</view>
					<view class="btn3 tab" :class="{ 'active': selectedTab === 'right' }" @click="selectTab('right',2)">
						{{$data.$language.wbtn3}}
					</view>
				</view>
				<!-- 列表 -->
				<view class="list" v-for="(item,index) in log" :key="index" >
					<view class="kilstview">
						<view class="left">
							<image src="../../static/caifubeifen_slices/woneimgs.png" mode=""></image>
						</view>
						<view class="middle">
							<view class="test1">
								WONE
							</view>
							<view class="test2">
								{{ formatTime(item.createtime)}}
							</view>
						</view>
					</view>
					
					<view class="right">
						<view class="test1">
							{{$data.$language.wtest1}}
						</view>
						<view class="test2" v-if="item.wone>0">
							+{{item.wone}}
						</view>
						<view class="test2" v-else>
							{{item.wone}}
						</view>
					</view>
				</view>
				<!-- <view class="list" v-for="(item,index) in log" :key="index"
					v-if="selectedTab == 'middle'&&item.usdt > 0.00">
					<view class="left">
						<image src="../../static/jiedianhuiyuanbeifen_slices/bianzu.png" mode=""></image>
					</view>
					<view class="middle">
						<view class="test1">
							NODE
						</view>
						<view class="test2">
							{{ formatTime(item.createtime)}}
						</view>
					</view>
					<view class="right">
						<view class="test1">
							{{$data.$language.wtest1}}
						</view>
						<view class="test2">
							{{item.usdt}}
						</view>
					</view>
				</view>
				<view class="list" v-for="(item,index) in log" :key="index"
					v-if="selectedTab == 'right'&&item.usdt < 0.00">
					<view class="left">
						<image src="../../static/jiedianhuiyuanbeifen_slices/bianzu.png" mode=""></image>
					</view>
					<view class="middle">
						<view class="test1">
							NODE
						</view>
						<view class="test2">
							{{ formatTime(item.createtime)}}
						</view>
					</view>
					<view class="right">
						<view class="test1">
							{{$data.$language.wtest1}}
						</view>
						<view class="test2">
							{{item.usdt}}
						</view>
					</view>
				</view> -->
				<!-- <view class="list">
					<view class="left">
						<image src="../../static/节点会员beifen_slices/bianzu.png" mode=""></image>
					</view>
					<view class="middle">
						<view class="test1">
							USDT
						</view>
						<view class="test2">
							06/25 09:41
						</view>
					</view>
					<view class="right">
						<view class="test1 second">
							+10.00
						</view>
						<view class="test2 everyday">
							每日释放
						</view>
					</view>
				</view> -->
				<!-- <view class="list">
					<view class="left">
						<image src="../../static/节点会员beifen_slices/bianzu.png" mode=""></image>
					</view>
					<view class="middle">
						<view class="test1">
							NODE
						</view>
						<view class="test2">
							06/25 09:41
						</view>
					</view>
					<view class="right">
						<view class="test1">
							已完成
						</view>
						<view class="test2">
							+2000.00
						</view>
					</view>
				</view> -->
				<!-- <view class="list" v-for="(item,index) in log.data" :key="index" v-if="item.type==5">
					<view class="left">
						<image src="../../static/jiedianhuiyuanbeifen_slices/bianzu.png" mode=""></image>
					</view>
					<view class="middle">
						<view class="test1">
							WONE
						</view>
						<view class="test2">
							06/25 09:41
						</view>
					</view>
					<view class="right">
						<view class="test1 second">
							+10.00
						</view>
						<view class="test2 everyday">
							{{$data.$language.wtest2}}
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import {
		getUsdt,
		getMoney,
		WoneLog
	} from '@/api/index.js'
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	export default {
		data() {
			return {
				selectedTab: 'left',
				// $language: uni.getStorageSync('locale') == 'en-US' ? enUS : zhCN,
				isDrawerOpen: false,
				isOpenMask: false,
				count_usdt: '',
				wone: '',
				woo: '',
				log: [],
				all: '99',
				code:'',
				page: 1,
				Shoetrue:true,
			}
		},
		onLoad() {
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.$data.$language = enUS
			}else if(translate=='zh-CN'){
				this.$data.$language = zhCN
			}else{
				this.$data.$language = trCN
			}
			this.loadData()
			this.WoneData()
		},
		onReachBottom() {
			console.log('滑动到距离底部100px的时候触发,可以放 。。业务逻辑');
			this.onlisrse()
		},
		methods: {
			WoneData(){
				getMoney(
					(data) => {
						// 处理成功返回的数据
						// this.count_usdt = parseInt(data.count_usdt).toFixed(2)
						this.count_usdt = data.count_usdt
						this.wone = data.freeze_wone
						this.woo = data.freeze_woo
						this.code = data.url
					},
					(errorMsg) => {
						// 处理请求失败或错误的情况
						console.error(errorMsg);
					}
				);
			},
			toImpaWONE() {
				uni.navigateTo({
					url: '/pages/WoneDetail/WoneDetail'
				})
			},
			selectTab(tab,index) {
				this.selectedTab = tab;
				this.all = index
				this.Shoetrue = true
				this.page = 1
				this.loadData()
				// if (tab == 'left') {
				// 	this.all = '0'
				// 	this.loadData()
				// }
				// if (tab == 'middle') {
				// 	this.all = '1'
				// 	this.loadData()
				// }
				// if (tab == 'right') {
				// 	this.all = '2'
				// 	this.loadData()
				// }
			},
			refreshLanguage(locale) {
				if (locale === 'zh-CN') {
					this.$language = zhCN
				} else if (locale === 'en-US') {
					this.$language = enUS
				}else{
					  this.$language = trCN
				  }
				uni.reLaunch({
					url: '/pages/wallet/wallet' // 当前页面的lujing
				});

			},
			toDetails() {
				uni.navigateTo({
					url: '/pages/details/details'
				})
			},
			formatTime(timestamp) {
				const date = new Date(timestamp*1000);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				const seconds = date.getSeconds();

				const formattedDate = `${month}/${day} ${hours}:${minutes}`;
				return formattedDate;
			},
			toWallet() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},
			toWalletAll() {
				uni.navigateTo({
					url: '/pages/walletAll/walletAll'
				})
			},
			toFlash() {
				uni.navigateTo({
					url: '/pages/flash/flash'
				})
			},
			toImpawn() {
				uni.navigateTo({
					url: '/pages/impawn/impawn'
				})
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
			onlisrse(){
				if(this.Shoetrue){
					this.page++
					WoneLog({
							all: this.all,
							page:this.page,
						},
						(data) => {
							// 处理成功返回的数据
							console.log(data,'123456')
							if(this.log.length==data.total){
								this.Shoetrue = false
							}
							this.log.push(...data.data);
							// this.log = data.data
						},
						(errorMsg) => {
							// 处理请求失败或错误的情况
							console.error(errorMsg);
						}
					);
				}
			},
			loadData() {
					WoneLog({
							all: this.all,
							page:this.page,
						},
						(data) => {
							// 处理成功返回的数据
							console.log(data,'123456')
							// this.log.push(...data.data);
							this.log = data.data
						},
						(errorMsg) => {
							// 处理请求失败或错误的情况
							console.error(errorMsg);
						}
					);
				
			},
		},
		components: {
			drawer,
			languageMask
		}
	}
</script>

<style>
	.box {
		width: 750rpx;
		/* background: linear-gradient(18deg, #fff, #fff, #fff, #fff, #8BA3CD); */
	}

	.head {
		padding: 40rpx;
	}

	.headTitle {
		display: flex;
	}

	.title {
		width: 164rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin-left: 224rpx;
		text-align: center;
		align-self: flex-end;
	}

	.total {
		width: 702rpx;
		height: 328rpx;
		margin: 0 0 0 24rpx;
		background-image: url(../../static/qianbaobeifen2_slices/bianzu 2.png);
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
		display: flex;
	}

	.total .left {
		width: 648rpx;
		height: 328rpx;
		margin-right: 0;
		overflow: hidden;
	}

	.total .right image {
		width: 14rpx;
		height: 26rpx;
		margin: 84rpx 0 0 14rpx;
	}

	.total .line1 {
		display: flex;
		margin: 58rpx 0 0 36rpx;
	}

	.line1 .test {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
		line-height: 40rpx;
	}

	.line1 image {
		width: 16rpx;
		height: 12rpx;
		margin-top: 8rpx;
		margin-left: 4rpx;
	}

	.line2 {
		display: flex;
	}

	.line2 .number {
		width: 212rpx;
		height: 54rpx;
		font-size: 48rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		margin: 16rpx 0 0 32rpx;
	}

	.line2 .word {
		width: 98rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		line-height: 32rpx;
		margin: 34rpx 0 0 10rpx;
	}

	.line3 {
		display: flex;
		flex-wrap: wrap;
		padding-right: 40rpx;
	}
	
	.line3 .code {
		/* height: 22rpx; */
		max-width: 666rpx;
		font-size: 39rpx;
		font-family: ArialMT;
		color: #fff;
		/* line-height: 22rpx; */
		margin: 10rpx 0 0 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.line3 image {
		width: 16rpx;
		height: 18rpx;
		margin: 32rpx 0 0 4rpx;
	}

	.line4 {
		display: flex;

	}

	.line4 .test1 {
		width: 76rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		line-height: 32rpx;
		margin-left: 32rpx;
		margin-top: 54rpx;
	}

	.line4 .test2 {
		width: 98rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		line-height: 32rpx;
		margin-left: 88rpx;
		margin-top: 54rpx;
	}

	.line4 .bd {
		width: 2rpx;
		height: 64rpx;
		opacity: 0.6;
		border-left: 1rpx solid #FFFFFF;
		margin: 38rpx 0 0 58rpx;
	}

	.line4 .test3 {
		width: 86rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		line-height: 32rpx;
		margin: 54rpx 0 0 30rpx;
	}

	.line4 .test4 {
		/* width: 98rpx; */
		height: 34rpx;
		font-size: 32rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		line-height: 36rpx;
		margin: 52rpx 0 0 80rpx;
	}

	.oval {
		width: 704rpx;
		height: 92rpx;
		margin: 32rpx 0 0 24rpx;
		display: flex;
	}

	.flash {
		width: 344rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 46rpx;
		border: 2rpx solid #F3F3F3;
		display: flex;
	}

	.flash .change,
	.impawn .change {
		width: 36rpx;
		height: 36rpx;
		margin: 28rpx 0 0 30rpx;
	}

	.flash .word,
	.impawn .word {
		width: 134rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2C2C2C;
		line-height: 40rpx;
		margin: 26rpx 0 0 12rpx;
	}

	.flash .go,
	.impawn .go {
		width: 28rpx;
		height: 10rpx;
		margin: 40rpx 0 0 76rpx;
	}

	.impawn {
		width: 342rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 46rpx;
		border: 2rpx solid #F3F3F3;
		margin-left: 16rpx;
		display: flex;
	}

	.classify {
		min-height: 972.33rpx;
		width: 702rpx;
		margin: 40rpx 0 0 24rpx;
	}

	.classify .title {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin: 0;
		margin-bottom: 10rpx;
	}
	
	.classify .title1 {
		/* width: 130rpx; */
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #919191;
		line-height: 44rpx;
		text-align: center;
		position: relative;
	}
	
	.classify .title2 {
		/* width: 308rpx; */
		height: 44rpx;
		font-size: 32rpx;
		font-family: Regular;
		font-weight: 400;
		color: #919191;
		line-height: 44rpx;
		text-align: center;
		position: relative;
		/* margin-left: 40rpx; */
	}
	.classify .ationve{
		color: #2C2C2C;
		font-weight: 600;
	}
	.classify .title1 .shortLine {
		width: 32rpx;
		height: 6rpx;
		background: #0762FF;
		position: absolute;
		left: 50%;
		bottom: -10rpx;
		transform: translateX(-50%);
	}
	.classify .title2 .shortLine {
		width: 32rpx;
		height: 6rpx;
		background: #0762FF;
		position: absolute;
		left: 50%;
		bottom: -10rpx;
		transform: translateX(-50%);
	}
	
	.shortLine {
		width: 32rpx;
		height: 6rpx;
		background: #0762FF;
		/* margin: 10rpx 0 0 54rpx; */
	}

	.details {
		width: 702rpx;
		min-height: 872rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding-bottom: 40rpx;
	}

	.btns {
		display: flex;
	}

	/* .btn1 {
		width: 142rpx;
		height: 52rpx;
		background: #0762FF;
		border-radius: 8rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 52rpx;
		font-family: Semibold;
		color: #FFFFFF;
		font-weight: 600;
		margin: 40rpx 0 0 32rpx;
	} */
	.tab {
		width: 142rpx;
		height: 52rpx;
		background: #F4F6FA;
		border-radius: 8rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 52rpx;
		font-weight: 400;
		color: #919191;
		line-height: 52rpx;
		font-weight: 400;
		margin: 40rpx 0 0 24rpx;
	}

	.active {
		background: #0762FF;
		color: #FFFFFF;
	}

	/* .btn2,
	.btn3 {
		width: 142rpx;
		height: 52rpx;
		background: #F4F6FA;
		border-radius: 8rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 52rpx;
		font-weight: 400;
		color: #919191;
		line-height: 52rpx;
		font-weight: 400;
		margin: 40rpx 0 0 24rpx;
	} */


	.details .list {
		height: 72rpx;
		width: 100%;
		margin: 80rpx 0 0 0rpx;
		padding:  0 24rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.details .list .kilstview{
		display: flex;
	}
	
	.details .list .left image {
		width: 74rpx;
		height: 76rpx;
		/* margin-top: 12rpx; */
	}
	
	.details .list .middle .test1 {
		width: 128rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 32rpx;
		margin-left: 12rpx;
		text-align: center;
	}
	
	.details .list .middle .test2 {
		width: 188rpx;
		height: 28rpx;
		font-size: 24rpx;
		font-family: ArialMT;
		color: #939393;
		line-height: 28rpx;
		margin: 12rpx 0 0 18rpx;
	}
	
	.details .list .right .test1 {
		/* width: 106rpx; */
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3AC296;
		line-height: 34rpx;
		/* margin-left: 292rpx; */
		text-align: right;
	}
	
	.details .list .right .test2 {
		/* width: 168rpx; */
		height: 34rpx;
		font-size: 32rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 36rpx;
		margin: 8rpx 0 0 0rpx;
		text-align: right;
	}

	.details .list .right .second {
		width: 168rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 36rpx;
		margin-left: 230rpx;
	}

	.details .list .right .everyday {
		width: 296rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #959AA7;
		line-height: 34rpx;
		margin-left: 102rpx;
	}
</style>